<%--
    Document   : view
    Created on : Nov 16, 2014, 2:45:47 PM
    Author     : Hai
--%>

<%@page contentType="text/html" pageEncoding="UTF-8" errorPage=""%>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>View Page</title>
               <%@include file="/configDefaultHead.jsp" %>
        <style>
            .myContainer h1{
                font-size: 2.5em;
                font-family: Georgia;
                letter-spacing: 0.1em;
                color: rgb(142,11,0);
                text-shadow: 1px 1px 1px rgba(255,255,255,0.6);
            }
            .myContainer h1 span{
                display: block;
                margin-top: 0.5em;
                font-family: Verdana;
                font-size: 0.6em;
                font-weight: normal;
                letter-spacing: 0em;
                text-shadow: none;
            }.meta{
                font-family: Georgia;
                color: rgba(69,54,37,0.6);
                font-size: 0.85em;
                font-style: italic;
                letter-spacing: 0.25em;
                border-bottom: 1px solid rgba(69,54,37,0.2);
                padding-bottom: 0.5em;
            }.meta span{
                text-transform: capitalize;
                font-style: normal;
                color: rgba(69,54,37,0.8);
            }.body p{
                font-family: Verdana;
                -moz-column-count: 2;
                -moz-column-gap: 1em;
                -webkit-column-count: 2;
                -webkit-column-gap: 1em;
                column-count: 2;
                column-gap: 1em;
                line-height: 1.5em;
                color: rgb(69,54,37);
            }.body p:first-child{
                font-size: 1.25em;
                font-family: Georgia;
                font-style: italic;
                -moz-column-count: 1;
                -webkit-column-count: 1;
                column-count: 1;
                letter-spacing: 0.1em;
            }
            .myContainer .body p:first-child:first-line{
                font-weight: bold;
            }date{
                font-family: Georgia;
                color: rgba(69,54,37,0.6);
                font-size: 0.75em;
                font-style: italic;
                letter-spacing: 0.25em;
                border-top: 1px solid rgba(69,54,37,0.2);
                display: block;
                padding-top: 0.5em;
                margin-top: 2em;
            }
        </style>
 
    </head>

    <body>
        <%@include file="/header.jsp" %>

        <div class="myContainer">
            <h1>
                <p class="title"> Web Typography</p>
                <span>A Demo For Beautiful Typography on the Web</span>
            </h1>
            <div class="meta"><span>Create</span> by <span>Matt Ward</span></div>
            <div class="body">
                <p>
                    It has been suggested that beautiful and usable websites are created on a foundation of beautiful and usable typography. That makes it a pretty important element that you will want to look at very carefully.
                </p>
                <date>Created: May 13, 2010</date>
            </div>

        </div>

    </body>
</html>
